import { useEffect } from 'react'
import { useNavigate, useLocation } from 'react-router-dom'
import { TabBar } from 'antd-mobile'
import { useMenuKey } from '@/stores'
import {
  BsHouseDoorFill,
  BsPersonBoundingBox,
  BsCreditCard2FrontFill,
  BsFillDiagram3Fill,
  BsBoxFill,
  BsCalendar2PlusFill,
} from 'react-icons/bs'

type PropsType = {
}

const TabBarItem = TabBar.Item

const BottomNav = (props: PropsType) => {

  const {

  } = props

  const navigate = useNavigate()
  const location = useLocation()
  const { menuKey, setMenuKey } = useMenuKey((state) => state)

  useEffect(() => {
    for (const key in tabItems) {
      if (tabItems[key].key === location.pathname) {
        setMenuKey(tabItems[key].key)
      }
    }
  }, [location.pathname])

  const tabItems: { [key: string]: any } = {
    'home': {
      key: '/home',
      icon: <BsHouseDoorFill />,
      title: '首页',
    },
    'customer': {
      key: '/customer',
      icon: <BsPersonBoundingBox />,
      title: '客户',
    },
    'account': {
      key: '/account',
      icon: <BsCreditCard2FrontFill />,
      title: '账户',
    },
    'channel': {
      key: '/channel',
      icon: <BsFillDiagram3Fill />,
      title: '渠道树',
    },
    'product': {
      key: '/product',
      icon: <BsBoxFill />,
      title: '产品',
    },
    'work': {
      key: '/work',
      icon: <BsCalendar2PlusFill />,
      title: '工作',
    },
  }

  const getTabList = () => {
    let tabList = []
    true && tabList.push(tabItems['home'])
    true && tabList.push(tabItems['customer'])
    true && tabList.push(tabItems['account'])
    true && tabList.push(tabItems['channel'])
    true && tabList.push(tabItems['product'])
    true && tabList.push(tabItems['work'])
    return tabList
  }

  const handleMenuClick = (key: string) => () => {
    setMenuKey(key)
    navigate(key, { replace: true })
  }

  return <TabBar activeKey={menuKey} safeArea>
    {getTabList().map((item) => (
      <TabBarItem key={item.key} icon={item.icon} title={item.title} onClick={handleMenuClick(item.key)} />
    ))}
  </TabBar>
}

export default BottomNav
